<template>
  <div id="app canvas">
	  
    <!-- <h1>{{msg}}</h1> -->
	<header id="header" class="alt">
		 <div class="logo" @click="toHome" style="cursor: pointer;">InkCloud <span style="font-family: '微软雅黑';">墨云自习</span></div>
		<van-button @click="ifvisit=true" class="logo2" icon="https://img01.yzcdn.cn/vant/user-active.png" type="info" color="transparent" size="mid">
		  附近的人
		</van-button>
		</header>
	
		 <!-- menu 用户菜单栏 -->

		 
		 
		 
	 <!-- Banner 中央标题 -->
	 	<section id="banner">
	 		<h1>Distribution of users in China</h1>
			
	 	</section>
		
		<!-- IndexArea 功能区 -->

		 
	<echart></echart>
    <div class="content">
		
		<el-drawer  :visible.sync="ifvisit" direction="rtl" size="30%" >
			<userlistCom ></userlistCom>
		</el-drawer>
      
    </div>

  </div>
  
</template>

<script>
import echart from './components/echart.vue'
import userlistCom from './components/userlistcom.vue'
import "echarts/map/js/china.js";
import axios from "axios";
import Vue from "vue";

Vue.prototype.axios = axios;
export default {
  name: 'app',
  components: {
   echart,userlistCom
  },
  data(){
    return {
	  ifvisit:false,
      msg:'老陈聊天',
      userlist:[
        {
          username:"小明",
          gender:"男"
        },
        {
          username:"小黑",
          gender:"男"
        },
        {
          username:"小红",
          gender:"男"
        },{
          username:"小白",
          gender:"女"
        }
      ],
      currentUser:{
          username:"小明",
          gender:"男" 
      }
    }
  },
  
  methods: {
    toggleUser:function(index){
      this.currentUser = this.userlist[index]
    },
	
	toHome:function(){
				 var mainAddr = this.$myConfig.mainAddr
				 this.timer = setTimeout(()=>{   //设置延迟执行
				      window.location.href = mainAddr;           
				             },0);
				
	}
	
  },
}
</script>

<style scoped>
.content{
  display: flex;
  width: 800px;
  height: 700px;
  position: absolute;
  right: -440px;
  top:540px;
}
body{
	display: block;
	background-size: cover;
	background:  url(assets/img/banner.jpg) fixed;
}
html,body,#app {
  margin: 0;
  padding: 0;
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  

}

/* Header 导航栏*/
#header {
	font-size: 1.25em;
	background: rgba(0, 0, 0, 0.75);
	color: #aed6f1;
	height: 3.25em;
	left: 0;
	line-height: 3.25em;
	position: fixed;
	text-align: right;
	top: 0;
	width: 100%;
	cursor:default;
	z-index: 10001;
}

#header > .logo {
	display: inline-block;
	height: inherit;
	left: 1.25em;
	line-height: inherit;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
}
#header > .logo2{
	display: inline-block;
	height: inherit;
	right: 3.25em;
	line-height: inherit;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
}

#header > .logo span {
	font-weight: 300;
	font-size: .8em;
	color: #FFF;
}

#header > a {
	transition: color 0.2s ease-in-out;
	display: inline-block;
	padding: 0 1.25em;
	text-decoration: none;
	color: #FFF;
}

#header > a:hover {
	color: #3498db;
}

/* 背景透明,位置调整 */
#header.alt {
	animation: none;
	background-color: transparent;
	box-shadow: none;
	overflow: hidden;
	position: absolute;
	top: 1em;
}

/* Banner 背景*/
#banner {
	padding: 12em 0 10em 0;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	text-align: center;
	

}

#banner h1 {
	font-size: 3.5em;
	font-weight: 100;
	color: #fff;
	line-height: 1em;
	margin: 0 0 0.5em 0;
	padding: 0;
}

#banner p {
	font-size: 1em;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 1.75em;
}
</style>
